<template>
  <div class="shopcart">
    <div class="img">
      <img src="../../assets/oi.png" alt="">
      <h3>购物车</h3>

    </div>

    <div class="content">
      <div class="title">
        <div class="back" @click="gotohome"><i class="el-icon-back"></i></div>
        <h3>全部商品</h3>
      </div>

      <div class="contentitle">
        <div class="inp">
          <input type="checkbox" :checked='ischecked' @click="selectcheck(ischecked)">
          <span>全选</span>
        </div>
        <div>商品信息</div>
        <div>单价</div>
        <div>数量</div>
        <div>金额</div>
        <div>操作</div>
      </div>
      <!-- 商品列表 -->
      <div class="goodslist" v-if="cartgoods.length">
        <div class="goodsitem" v-for="(goods,index) in cartgoods" :key="index">
          <ul>

            <li>
              <input type="checkbox" name="" id="" @click="ischenck(goods)" :checked="goods.checked">
            </li>
            <li>
              <img :src="goods.thumb_url" alt="">
              <span>{{(goods.goods_name.slice(0,6))}}</span>
            </li>
            <li>
              <span>{{(goods.price/100).toFixed(2)}}</span>
            </li>
            <li>
              <el-input-number :min="1" size="small" class="jsq" v-model="goods.buy_count" @change="updatanum(goods,goods.buy_count)" :max="goods.counts"></el-input-number>
            </li>
            <li>
              <span>{{(goods.price/100*goods.buy_count).toFixed(2)}}</span>
            </li>
            <li>
              <span @click="removeitem(goods)">删除</span>
            </li>
          </ul>
        </div>

      </div>
      <div v-else>空空如也</div>

      <!-- //尾部 -->
      <div class="footer">
        <div class="footcheck">
          <input type="checkbox" :checked='ischecked' @click="selectcheck(ischecked)">
          <span>全选</span>
          <span @click="removeall">清空购物车</span>
        </div>
        <div class="order">
          <span>已选<i>{{allnum}}</i>件</span>
          <span>合计：<i>¥{{allprice}}</i></span>
          <div :class="{account:cartgoods.length}" @click="goto">结算</div>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
import { Message } from 'element-ui'
import { mapGetters, mapState } from 'vuex'
export default {
  data() {
    return {
      ischecked: false, //全选
      allnum: 0, //商品的总数量
      allprice: 0, //总计价钱
      totalamount: 0, //结算
      deletegoods: {} //当前删除的商品
    }
  },
  methods: {
    gotohome() {
      this.$router.push('/home')
    },
    // 更新购物车商品数量
    updatanum(goods, num) {
      let user_id = this.userinfo.id
      this.$store.dispatch('cart/updatanum', { goods, num, user_id })
      this.hasselectadd()
      this.getallprice()
    },
    //单个商品勾选
    ischenck(goods) {
      this.$store.dispatch('cart/ischeck', { goods })
      this.hasselectadd()
      this.getallprice()
    },
    //全选
    selectcheck(ischecked) {
      this.ischecked = !ischecked
      this.$store.dispatch('cart/selectedall', { ischecked })
      this.hasselectadd()
      this.getallprice()
    },
    //判断是否选中计算数量的一个方法
    hasselectadd() {
      let flag = true
      let totalnum = 0
      this.cartgoods.forEach(goods => {
        if (!goods.checked) {
          flag = false
        } else {
          totalnum += goods.buy_count
        }
      })
      this.allnum = totalnum
      this.ischecked = flag
    },
    //计算商品的总价一个方法
    getallprice() {
      let totalprcie = 0
      let newtalprice = 0
      this.cartgoods.forEach(goods => {
        if (goods.checked) {
          totalprcie += (goods.price / 100) * goods.buy_count
          newtalprice = totalprcie.toFixed(2)
        }
      })
      this.allprice = newtalprice
    },
    //删除单个商品
    removeitem(goods) {
      this.$confirm('确定删除该商品嘛', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let user_id = this.userinfo.id
          this.deletegoods = goods
          this.$store.dispatch('cart/deletegoods', { goods, user_id })

          this.getallprice()
          this.hasselectadd()
          this.$store.dispatch('cart/cartlist', { user_id })
        })
        .catch(() => {
          return
        })
    },
    //清空购物车
    removeall() {
      this.$confirm('确定删除全部商品嘛', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let user_id = this.userinfo.id
          this.$store.dispatch('cart/deleteall', { user_id })
          this.getallprice()
          this.hasselectadd()
          this.$store.dispatch('cart/cartlist', { user_id })
        })
        .catch(() => {
          return
        })
    },
    //直接清空购物车
    newcart() {
      let user_id = this.userinfo.id
      this.$store.dispatch('cart/deleteall', { user_id })
      this.getallprice()
      this.hasselectadd()
      this.$store.dispatch('cart/cartlist', { user_id })
    },
    //进行结算
    goto() {
      let a = this.cartgoods.filter(i => {
        return i.checked
      })
      if (a.length) {
        this.$confirm('是否结算', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$store.dispatch('cart/pldeleteCart', { id: this.userinfo.id, a })
            this.$router.replace('/zf')
          })
          .catch(() => {
            return
          })
      } else {
        this.$message({
          message: '请选择商品',
          type: 'warning'
        })
      }
    }
  },
  computed: {
    ...mapGetters(['userinfo']),

    ...mapState('cart', ['cartgoods'])
  },
  mounted() {
    this.$nextTick(() => {
      let user_id = this.userinfo.id

      this.$store.dispatch('cart/cartlist', { user_id })
    })
  }
}
</script>

<style scoped lang="less">
.shopcart {
  width: 100%;
  position: relative;
  .img {
    display: flex;
    margin: 20px;
    width: 300px;
    height: 100px;

    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1px solid black;
    }
    h3 {
      line-height: 100px;
      text-align: center;
      margin-left: 20px;
    }
  }

  .content {
    width: 80%;

    height: 100%;
    margin: 0 10%;
    .title {
      display: flex;

      .back {
        position: absolute;
        left: 50px;
        height: 30px;
        width: 40px;
        text-align: center;
        line-height: 30px;
        border: 1px solid black;
      }
      h3 {
        width: 90px;
        color: #f56c6c;
      }
    }
    .contentitle {
      border-top: 1px solid gray;
      display: flex;
      justify-content: space-around;
      vertical-align: middle;

      .inp {
        margin-left: 9%;
      }
    }
    .goodslist {
      width: 100%;
      padding-bottom: 80px;

      .goodsitem {
        border: 1px solid #f56c6c;
        margin-top: 5px;

        ul {
          display: flex;
          justify-content: space-around;
          padding-left: 12%;
          background: #f7f7f7;
          li {
            flex: flex;
            height: 100px;
            line-height: 100px;
            text-align: center;
            width: 200px;

            span {
              font-size: 13px;
              cursor: pointer;
              width: 100px;
              overflow: hidden;

              overflow: hidden;
            }
            img {
              height: 80px;
              width: 80px;
              vertical-align: middle;
            }
          }
        }
      }
    }
    .footer {
      display: flex;
      height: 50px;
      width: 80%;
      background: #f7f7f7;
      position: fixed;
      bottom: 0;
      justify-content: space-between;
      z-index: 999;
      .footcheck {
        line-height: 50px;
        margin-left: 10px;
        span {
          margin-left: 10px;
        }
      }
      .order {
        display: flex;
        justify-content: space-around;
        line-height: 50px;
        width: 40%;
        span {
          margin-left: 20px;
          width: 120px;
          i {
            color: #f56c6c;
          }
        }
        .account {
          background: #f56c6c;
          width: 120px;
          text-align: center;
        }
      }
    }
  }
  .jsq {
    width: 100px;
  }
  .account {
    background: #f56c6c;
    width: 120px;
    text-align: center;
  }
}
</style>